<template>
	<view class="navigation-bar"
		:style="{height:device.navigationBarHeight+'px', backgroundColor: bgColor ? bgColor : 'transparent'}">
		<!-- <image class="back" src="@/static/ic_back.png" @click="onBack"></image> -->
		<view v-if="isBack" class="back" @click="onBack">
			<u-icon name="arrow-left" color="#2D2D2D" size="16"></u-icon>
		</view>
		<view class="title">{{title}}</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['device']),
		},
		props: {
			title: String,
			bgColor: String,
			isBack: Boolean,
		},
		data() {
			return {

			}
		},
		methods: {
			onBack() {
				this.$emit("back")
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.navigation-bar {
		position: relative;

		.back {
			position: absolute;
			bottom: 0px;
			left: 0px;
			padding: 20rpx 50rpx 26rpx 30rpx;
		}

		.title {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 0px;
			padding: 20rpx 0rpx;
			font-size: 33rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #2D2D2D;
			line-height: 46rpx;
		}
	}
</style>